<template>
	<view class="page-container">
		<TopView class="top-fixed"></TopView>
		<scroll-view class="scroll-content" scroll-y="true" show-scrollbar="false">
			<NewsCardView v-for="(item, index) in cardList" :key="index" :title="item.title" :isTop="item.isTop"
				:author="item.author" :comments="item.comments" :time="item.time"
				:to="'/pages/tabBar/NewsListPage/NewsDetailsPage/NewsDetailsPage?index=' + index" :images="item.images">
			</NewsCardView>
		</scroll-view>
	</view>
</template>

<script>
	import TopView from '../../../components/TopView.vue';
	import NewsCardView from '../../../components/NewsCardView.vue';
	import newsList from '../../../Data/news.json';

	export default {
		components: {
			NewsCardView,
			TopView
		},
		data() {
			return {
				cardList: newsList
			};
		},
		onShow() {
			const app = getApp();
			if (!app.globalData) app.globalData = {};
			app.globalData.newsList = this.cardList;
		}
	};
</script>

<style scoped>
	.page-container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.top-fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
	}

	.scroll-content {
		padding-top: 100rpx;
		padding-bottom: 120rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
		height: 100%;
	}
</style>